package com.example.day0221.demon

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.OutlinedIconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage

import com.example.day0225.R

@Composable
fun  Demon01 (){
    //    //横向布局
//    Row (modifier = Modifier.fillMaxWidth(), horizontalArrangement =Arrangement.Center ){
//        Text(
//            //文本
//            text = "Hello $name!",
//            //颜色
//            color = colorResource(id = R.color.purple_200),
//            //字号
//            fontSize = 22.sp,
//            //类型，字重
//            fontWeight = FontWeight.Black,
//            //字符间距
//            letterSpacing = 13.sp,
//            //文本方向
//            textAlign = TextAlign.Center,
//            //最大行数
//            maxLines = 1,
//            //超出范围后
//            overflow =TextOverfrelow.Visible
//        )
//        Text(
//            text = "123456789"
//        )
//    }

    var name by remember {
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }


    //纵向布局
    Column (modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp)
        .background(color = colorResource(id = R.color.teal_200)))
    {
        Text(text = "qweretyuii", modifier = Modifier.padding(20.dp))
        Text(text = "123456789")

        TextField(
            //输入的值
            value = name,
            //当输入值改变的时候
            onValueChange ={name=it},
            //输入框的标签，相当于hilt
            label = {
                Text(text = "请输入用户名")
            },
            //左侧图标
            leadingIcon = {
                //Icon 有3种形式,vector的是直接添加系统图标
                //painter的是添加Drawable的图标
                Icon(imageVector = Icons.Default.AccountCircle, contentDescription = "")
            },
            //右侧图标
            trailingIcon = {
                Icon(painter = painterResource(id = R.drawable.ic_action_eye),
                    contentDescription ="",
                    modifier = Modifier.size(20.dp))
            },
            //边框
            shape = RoundedCornerShape(20.dp)

        )
        OutlinedTextField(value = password,
            onValueChange = {password=it},
            label = {
                Text(text = "请输入密码")
            },
//            leadingIcon = {
//                //Icon 有3种形式,vector的是直接添加系统图标
//                //painter的是添加Drawable的图标
//                Icon(imageVector = Icons.Default.AccountCircle, contentDescription = "")
//            },
            trailingIcon = {
                Icon(
                    //painter的是添加Drawable的图标
                    painter = painterResource(id = R.drawable.ic_action_eye),
                    contentDescription = "",
                    modifier = Modifier.size(20.dp)
                )
            },
            visualTransformation = PasswordVisualTransformation(),
            //边框
            shape = RoundedCornerShape(20.dp)
        )
        Button(onClick = { /*TODO*/ }) {
            Text(text = "登录")
        }
        OutlinedButton(onClick = { /*TODO*/ }) {
            Text(text = "登录")
        }
        ElevatedButton(onClick = { /*TODO*/ }) {
            Text(text = "登录")
        }
        TextButton(onClick = { /*TODO*/ }) {
            Text(text = "登录")
        }
        OutlinedIconButton(onClick = { /*TODO*/ }) {
            Text(text = "登录")
        }

        Image(imageVector = Icons.Default.ArrowBack, contentDescription = "",Modifier.size(40.dp))
        Image(painter = painterResource(id = R.drawable.icon1868),
            contentDescription ="",
            Modifier.clickable {
            Log.d("sss", "点击了图片")
        })


        AsyncImage(model ="https://tse2-mm.cn.bing.net/th/id/OIP-C.1kVJzbPMII9PIaw3V84lQwHaHa?rs=1&pid=ImgDetMain" ,
            contentDescription = "",
            modifier = Modifier.size(200.dp)
                .clip(CircleShape))



    }
}